<template>
	<div style="background-color: rgb(44, 59, 91);">
		<div id="main" style="width: 80vw;height:80vh;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'SmoothLineChart',
		mounted() {
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
      let xs = [],ys=[];
      for(let i=90000;i < 100000;i++) {
        xs.push(i);
        let y = i*(i+100.6371)/(i - 0.6371)-(i+100.6371)-0.6371;
        ys.push(y*10000);
      }
			option = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					//边界线
					boundaryGap: false,
					//x轴刻度显示与否
					axisTick:{ show: false },
					axisLine: {
						show: false
					},
					data: xs
				},
				yAxis: {
					type: 'value',
					show: false,
					splitLine: {
						show: false
					}
				},
				series: [{
						name: 'AA',
						data: ys,
						type: 'line',
						showSymbol: false,
						smooth: true,
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 1,
									color: 'rgba(0, 134, 255, 1)' // 0% 处的颜色

								}, {
									offset: 0,
									color: ' rgba(25, 234, 190, 1) ' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							},
							borderWidth: 1,
							borderColor: '#fff'
						},
						//y轴背景色
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(38, 224, 202, 1)' // 0% 处的颜色

								}, {
									offset: 1,
									color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							},
							opacity: 0.1
						}
					},
					{
						name: 'BB',
						data: ys,
						type: 'line',
						showSymbol: false,
						smooth: true
					}
				]
			};

			option && myChart.setOption(option);
		}
	}
</script>

<style>
</style>
